{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros-m24.html" import gallery_tile with context %}

<section class="m24-section-ai m24-t-dark" id="gallery">
  <div class="m24-c-content">
    <header class="m24-c-intro">
      <h2 class="m24-c-intro-title">{{ ftl('m24-home-join-the-movement') }}</h2>
      <p>{{ ftl('m24-home-our-mission-is') }}</p>
    </header>

    <div class="m24-c-gallery-container">

      {{ gallery_tile(
        class='m24-l-grid-quarter',
        image=picture(
          url="img/home/2024/ai-gallery/voice-mobile-720.jpg",
          sources=[
            {
              'media': '(max-width: 1311px)',
              "srcset" : {
                "img/home/2024/ai-gallery/voice-mobile-375.jpg": "375w",
                "img/home/2024/ai-gallery/voice-mobile-720.jpg": "720w",
                "img/home/2024/ai-gallery/voice-mobile-976.jpg": "976w",
                "img/home/2024/ai-gallery/voice-mobile-1232.jpg": "1232w",
                "img/home/2024/ai-gallery/voice-mobile-1450.jpg": "1450w",
              },
              'sizes': {
                "(min-width: 768px)": "calc((100vw - 32px) / 2)",
                "default": "calc(100vw - 32px)",
              },
              'width' : '1450',
              'height' : '723'
            },
            {
              'srcset': {
                "img/home/2024/ai-gallery/voice-desktop-344.jpg": "344w",
                "img/home/2024/ai-gallery/voice-desktop-664.jpg": "664w",
              },
              'sizes': {
                "(min-width: 1440px)": "337px",
                "default": "calc(25vw - 64px)",
              },
              'width' : '664',
              'height' : '664'
            },
          ],
          optional_attributes={
            "loading": "lazy",
            "alt": "",
          }
        ),
        tag=ftl('m24-home-tag-product'),
        title=ftl('m24-home-common-voice'),
        desc=ftl('m24-home-donate-your-voice-to-make'),
        link_url='https://commonvoice.mozilla.org/'+ utm_params,
        cta_text=ftl('m24-home-donate-your-voice'),
        link_attributes='rel="external" target="_blank" data-link-text="Donate your voice"'
      ) }}

      {{ gallery_tile(
        class='m24-l-grid-half',
        image=picture(
          url="img/home/2024/ai-gallery/trustworthy-mobile-720.jpg",
          sources=[
            {
              'media': '(max-width: 1311px)',
              "srcset" : {
                "img/home/2024/ai-gallery/trustworthy-mobile-375.jpg": "375w",
                "img/home/2024/ai-gallery/trustworthy-mobile-720.jpg": "720w",
                "img/home/2024/ai-gallery/trustworthy-mobile-976.jpg": "976w",
                "img/home/2024/ai-gallery/trustworthy-mobile-1232.jpg": "1232w",
                "img/home/2024/ai-gallery/trustworthy-mobile-1450.jpg": "1450w",
              },
              'sizes': {
                "(min-width: 768px)": "calc((100vw - 32px) / 2)",
                "default": "calc(100vw - 32px)",
              },
              'width' : '1450',
              'height' : '723'
            },
            {
              'srcset': {
                "img/home/2024/ai-gallery/trustworthy-desktop-688.jpg": "688w",
                "img/home/2024/ai-gallery/trustworthy-desktop-1024.jpg": "1024w",
                "img/home/2024/ai-gallery/trustworthy-desktop-1360.jpg": "1360w",
              },
              'sizes': {
                "(min-width: 1440px)": "680px",
                "default": "calc((100vw - 64px) / 2)",
              },
              'width' : '1360',
              'height' : '1088'
            },
          ],
          optional_attributes={
            "loading": "lazy",
            "alt": ftl('m24-home-alt-trustworthy'),
          }
        ),
        tag=ftl('m24-home-tag-event'),
        title=ftl('m24-home-can-ai-be'),
        desc=ftl('m24-home-in-a-world'),
        link_url='https://www.youtube.com/watch?v=GOhibTSUTO0',
        cta_text=ftl('m24-home-watch-now'),
        link_attributes='rel="external" target="_blank" data-link-text="Watch now (Trustworthy AI)"'
      ) }}

      {% if ftl_has_messages('m24-home-solo-ai', 'm24-home-create-your-website') %}
        {{ gallery_tile(
          class='m24-l-grid-quarter',
          image=picture(
            url="img/home/2024/ai-gallery/solo-ai-mobile-720.jpg",
            sources=[
              {
                'media': '(max-width: 1311px)',
                "srcset": {
                  "img/home/2024/ai-gallery/solo-ai-mobile-375.jpg": "375w",
                  "img/home/2024/ai-gallery/solo-ai-mobile-720.jpg": "720w",
                  "img/home/2024/ai-gallery/solo-ai-mobile-976.jpg": "976w",
                  "img/home/2024/ai-gallery/solo-ai-mobile-1232.jpg": "1232w",
                  "img/home/2024/ai-gallery/solo-ai-mobile-1450.jpg": "1450w",
                },
                'sizes': {
                  "(min-width: 768px)": "calc((100vw - 32px) / 2)",
                  "default": "calc(100vw - 32px)",
                },
                'width' : '1450',
                'height' : '723'
              },
              {
                'srcset': {
                  "img/home/2024/ai-gallery/solo-ai-desktop-344.jpg": "344w",
                  "img/home/2024/ai-gallery/solo-ai-desktop-664.jpg": "664w",
                },
                'sizes': {
                  "(min-width: 1440px)": "332px",
                  "default": "calc((100vw - 64px) / 4)",
                },
                'width' : '664',
                'height' : '664'
              },
            ],
            optional_attributes={
              "loading": "lazy",
              "alt": ftl('m24-home-alt-solo-ai-logo'),
            }
          ),
          tag=ftl('m24-home-tag-project', fallback='m24-home-tag-product'),
          title=ftl('m24-home-solo-ai'),
          desc=ftl('m24-home-create-your-website'),
          link_url='https://soloist.ai/?utm_source=mozilla&utm_medium=cards_join_the_movement&utm_campaign=mozilla_homepage',
          cta_text=ftl('m24-home-get-started'),
          link_attributes='rel="external" target="_blank" data-link-text="Get started (Solo)"'
        ) }}
      {% endif %}

      {% if ftl_has_messages('m24-home-our-transformation', 'm24-home-why-do-legacy', 'm24-home-watch-now' ) %}
        {{ gallery_tile(
          class='m24-l-grid-quarter',
          image=picture(
            url="img/home/2024/ai-gallery/change-signal-mobile-720.jpg",
            sources=[
              {
                'media': '(max-width: 1311px)',
                "srcset" : {
                  "img/home/2024/ai-gallery/change-signal-mobile-375.jpg": "375w",
                  "img/home/2024/ai-gallery/change-signal-mobile-720.jpg": "720w",
                  "img/home/2024/ai-gallery/change-signal-mobile-976.jpg": "976w",
                  "img/home/2024/ai-gallery/change-signal-mobile-1232.jpg": "1232w",
                  "img/home/2024/ai-gallery/change-signal-mobile-1450.jpg": "1450w",
                },
                'sizes': {
                  "(min-width: 768px)": "calc((100vw - 32px) / 2)",
                  "default": "calc(100vw - 32px)"
                },
                'width' : '1450',
                'height' : '723'
              },
              {
                'srcset': {
                  "img/home/2024/ai-gallery/change-signal-desktop-344.jpg": "344w",
                  "img/home/2024/ai-gallery/change-signal-desktop-664.jpg": "664w",
                },
                'sizes': {
                  "(min-width: 1440px)": "332px",
                  "default": "calc((100vw - 64px) / 4)",
                },
                'width' : '664',
                'height' : '664'
              },
            ],
            optional_attributes={
              "loading": "lazy",
              "alt": ftl('m24-home-alt-transformation'),
            }
          ),
          tag=ftl('m24-home-tag-video'),
          title=ftl('m24-home-our-transformation'),
          desc=ftl('m24-home-how-do-legacy'),
          link_url='https://www.youtube.com/watch?v=fIVj45F9dfI&utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=m24-homepage',
          cta_text=ftl('m24-home-watch-now'),
          link_attributes='rel="external" target="_blank" data-link-text="Watch now"'
        ) }}
      {% else %}
        {{ gallery_tile(
          class='m24-l-grid-quarter',
          image=picture(
            url="img/home/2024/ai-gallery/lumigator-mobile-720.jpg",
            sources=[
              {
                'media': '(max-width: 1311px)',
                "srcset" : {
                  "img/home/2024/ai-gallery/lumigator-mobile-375.jpg": "375w",
                  "img/home/2024/ai-gallery/lumigator-mobile-720.jpg": "720w",
                  "img/home/2024/ai-gallery/lumigator-mobile-976.jpg": "976w",
                  "img/home/2024/ai-gallery/lumigator-mobile-1232.jpg": "1232w",
                  "img/home/2024/ai-gallery/lumigator-mobile-1450.jpg": "1450w",
                },
                'sizes': {
                  "(min-width: 768px)": "calc((100vw - 32px) / 2)",
                  "default": "calc(100vw - 32px)",
                },
                'width' : '1450',
                'height' : '723'
              },
              {
                'srcset': {
                  "img/home/2024/ai-gallery/lumigator-desktop-344.jpg": "344w",
                  "img/home/2024/ai-gallery/lumigator-desktop-664.jpg": "664w",
                },
                'sizes': {
                  "(min-width: 1440px)": "332px",
                  "default": "calc((100vw - 64px) / 4)",
                },
                'width' : '664',
                'height' : '664'
              },
            ],
            optional_attributes={
              "loading": "lazy",
              "alt": ftl('m24-home-alt-lumigator-logo'),
            }
          ),
          tag=ftl('m24-home-tag-product'),
          title=ftl('m24-home-lumigator'),
          desc=ftl('m24-home-find-the-just'),
          link_url='https://blog.mozilla.ai/introducing-lumigator-2/' + utm_params,
          cta_text=ftl('m24-home-get-started'),
          link_attributes='rel="external" target="_blank" data-link-text="Get started (Lumigator)"'
        ) }}
      {% endif %}

      {% if ftl_has_messages('m24-home-any-agent', 'm24-home-stop-wiring-tools', 'm24-home-get-started' ) %}
        {{ gallery_tile(
          class='m24-l-grid-quarter',
          image=picture(
            url="img/home/2024/ai-gallery/pink-cloud-mobile-720.png",
            sources=[
              {
                'media': '(max-width: 1311px)',
                "srcset" : {
                  "img/home/2024/ai-gallery/pink-cloud-mobile-375.png": "375w",
                  "img/home/2024/ai-gallery/pink-cloud-mobile-720.png": "720w",
                  "img/home/2024/ai-gallery/pink-cloud-mobile-976.png": "976w",
                  "img/home/2024/ai-gallery/pink-cloud-mobile-1232.png": "1232w",
                  "img/home/2024/ai-gallery/pink-cloud-mobile-1450.png": "1450w",
                },
                'sizes': {
                  "(min-width: 768px)": "calc((100vw - 32px) / 2)",
                  "default": "calc(100vw - 32px)",
                },
                'width' : '1450',
                'height' : '723'
              },
              {
                'srcset': {
                  "img/home/2024/ai-gallery/pink-cloud-desktop-344.png": "344w",
                  "img/home/2024/ai-gallery/pink-cloud-desktop-664.png": "664w",
                },
                'sizes': {
                  "(min-width: 1440px)": "332px",
                  "default": "calc((100vw - 64px) / 4)",
                },
                'width' : '664',
                'height' : '664'
              },
            ],
            optional_attributes={
              "loading": "lazy",
              "alt": ftl('m24-home-alt-pink-cloud'),
            }
          ),
          tag=ftl('m24-home-tag-product'),
          title=ftl('m24-home-any-agent'),
          desc=ftl('m24-home-stop-wiring-tools'),
          link_url='https://www.mozilla.ai/product/agent-platform' + utm_params,
          cta_text=ftl('m24-home-get-started'),
          link_attributes='rel="external" target="_blank" data-link-text="Get started (Any Agent)"'
        ) }}
      {% else %}
        {{ gallery_tile(
          class='m24-l-grid-quarter',
          image=picture(
            url="img/home/2024/ai-gallery/mozfest-mobile-720.png",
            sources=[
              {
                'media': '(max-width: 1311px)',
                "srcset" : {
                  "img/home/2024/ai-gallery/mozfest-mobile-375.png": "375w",
                  "img/home/2024/ai-gallery/mozfest-mobile-720.png": "720w",
                  "img/home/2024/ai-gallery/mozfest-mobile-976.png": "976w",
                  "img/home/2024/ai-gallery/mozfest-mobile-1232.png": "1232w",
                  "img/home/2024/ai-gallery/mozfest-mobile-1450.png": "1450w",
                },
                'sizes': {
                  "(min-width: 768px)": "calc((100vw - 32px) / 2)",
                  "default": "calc(100vw - 32px)"
                },
                'width' : '1450',
                'height' : '723'
              },
              {
                'srcset': {
                  "img/home/2024/ai-gallery/mozfest-desktop-344.jpg": "344w",
                  "img/home/2024/ai-gallery/mozfest-desktop-664.jpg": "664w",
                },
                'sizes': {
                  "(min-width: 1440px)": "332px",
                  "default": "calc((100vw - 64px) / 4)",
                },
                'width' : '664',
                'height' : '664'
              },
            ],
            optional_attributes={
              "loading": "lazy",
              "alt": ftl('m24-home-alt-mozfest'),
            }
          ),
          tag=ftl('m24-home-tag-event'),
          title=ftl('m24-home-mozfest-join-us'),
          desc=ftl('m24-home-mozfest-the-future'),
          link_url='https://www.mozillafestival.org/' + utm_params,
          cta_text=ftl('m24-home-mozfest-get-your'),
          link_attributes='rel="external" target="_blank" data-link-text="Get your badge today"'
        ) }}
      {% endif %}

      {{ gallery_tile(
        class='m24-l-grid-half',
        image=picture(
          url="img/home/2024/ai-gallery/ventures-mobile-720.jpg",
          sources=[
            {
              'media': '(max-width: 1311px)',
              "srcset" : {
                "img/home/2024/ai-gallery/ventures-mobile-375.jpg": "375w",
                "img/home/2024/ai-gallery/ventures-mobile-720.jpg": "720w",
                "img/home/2024/ai-gallery/ventures-mobile-976.jpg": "976w",
                "img/home/2024/ai-gallery/ventures-mobile-1232.jpg": "1232w",
                "img/home/2024/ai-gallery/ventures-mobile-1450.jpg": "1450w",
              },
              'sizes': {
                "(min-width: 768px)": "calc((100vw - 32px) / 2)",
                "default": "calc(100vw - 32px)",
              },
              'width' : '1450',
              'height' : '723'
            },
            {
              'srcset': {
                "img/home/2024/ai-gallery/ventures-desktop-688.jpg": "688w",
                "img/home/2024/ai-gallery/ventures-desktop-1024.jpg": "1024w",
                "img/home/2024/ai-gallery/ventures-desktop-1360.jpg": "1360w",
              },
              'sizes': {
                "(min-width: 1440px)": "680px",
                "default": "calc((100vw - 64px) / 2)",
              },
              'width' : '1360',
              'height' : '1088'
            },
          ],
          optional_attributes={
            "loading": "lazy",
            "alt": ftl('m24-home-alt-ventures'),
          }
        ),
        tag=ftl('m24-home-tag-program'),
        title=ftl('m24-home-mozilla-ventures'),
        desc=ftl('m24-home-got-an-earlystage'),
        link_url='https://mozilla.vc/' + utm_params,
        cta_text=ftl('m24-home-read-more'),
        link_attributes='rel="external" target="_blank" data-link-text="Read more (Ventures)"'
      ) }}
    </div>
  </div>
</section>
